<template>
  <div class="mod-config">
    <basic-container>
        <navigationRenWuShu :sign="{a:false,b:false,c:true,d:false,e:false,f:false}"></navigationRenWuShu>
      <div v-if="zhiShow=='1'" class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">任务书审核</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
                <div class="flex">
                    <div>
                        <el-form :model="form"  :inline="true" class="form-inline">
                        <el-form-item label="发约人姓名">
                            <el-input v-model="form.fayueName" placeholder="发约人姓名" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="发约人职务">
                            <el-input v-model="form.fayueZhiwu" placeholder="发约人职务" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人姓名">
                            <el-input v-model="form.shouyueName" placeholder="受约人姓名" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人职务">
                            <el-input v-model="form.shouyueZhiwu" placeholder="受约人职务" style="width: 160px;"></el-input>
                        </el-form-item>

                        <el-form-item label="签订级别">
                            <el-select :clearable="true" v-model="form.gzZt" placeholder="请选择签订级别"  style="width:100%;"
                                class="xiaLa">
                                <el-option v-for="item in leveList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft">检索</el-button>
                        </el-form-item>
                        </el-form>
                    </div>
                </div>
           </div>
        </div>

            <div class="border-top-theme">
                <div class="mt10">
                    任务书
                    <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
                    <div style="float:right">
                        <el-button type="primary" @click="wbshOkAll">批量审核</el-button>
                    </div>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%;margin-top:20px" height="60vh"  ref="tableRef">
                <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column prop="workAssignName" label="任务书名称" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="shouyueName" label="受约人姓名" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="workAssignAuditStatus" label="节点" min-width="120" header-align="center" align="center">
                   <template slot-scope="scope">
                    <span v-html="cutout2(scope.row.workAssignAuditStatus)"/>
                  </template>
                </el-table-column>
                <el-table-column prop="tui" label="状态" min-width="120" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-popover
                            placement="left"
                            width="300"
                            trigger="hover">
                            <p>杜震宇</p>
                            <el-table :data="gridData">
                                <el-table-column width="90" property="name" label="姓名"></el-table-column>
                                <el-table-column width="90" property="zhiwu" label="职务"></el-table-column>
                                <el-table-column width="90" property="status" label="状态"></el-table-column>
                            </el-table>

                               <div slot="reference" class="name-wrapper">
                              <span v-if="scope.row.tui == 1" >未审核</span>
                              <span v-else style="color:#ff3300">已审核</span>
                            </div>

                        </el-popover>

                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="checkDetails(scope.row)">查看审核#</el-button>
                        <el-button type="primary" plain @click="tracking(scope.row)">跟踪#</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                            layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            </div>
      </div>
      <rwszbForm ref="rwszbFormRef" v-if="zhiShow==2" :rwszbForm='rwszbForm' v-on:zhibiaoChild='zhibiaoChild'></rwszbForm>
      <genzongForm v-if="genzongForm.dialogVisible"  :genzongForm='genzongForm' ></genzongForm>
    </basic-container>
  </div>
</template>

<script>
import rwszbForm from '@/views/hetongrenwu/components/renwushuzb-form.vue'
import genzongForm from '@/views/hetongrenwu/components/genzong-form.vue'
import {getPage,wbshOkAll} from '@/api/hetongrenwu/gongzuorenwushu/workAssigncj'


export default {
    components:{
        rwszbForm,
        genzongForm
    },
    data(){
        return{
            form:{},
            radio:'1',
            radioTwo:1,
            tableData:[],
            pageIndex:1,
            pageSize: 10,
            totalPage: 0,
            zhiShow:1,
            rwszbForm:{},
            gridData:[
                {
                zhiwu: '经理',
                name: '王小虎',
                status: '退回'
                }
            ],
            leveList:[
                {value:"所属单位部门负责人",label:"所属单位部门负责人"}
            ],
            genzongForm:{},
            searchadvanced: true,
            searchheight: '0',
        }
    },
    created() {
    this.getDataList()
    },
    methods:{
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        //合同跟踪
        tracking(row){
          this.rowid=row.id;
         //console.log(this.rowid)
            this.genzongForm={
            dialogVisible:true,
                rowid:row.id
          }
           //console.log(this.rowid)
        },
        //编辑查看
        checkDetails(row){
            this.zhiShow=2;
            this.rwszbForm={
                enter:6,
                disabled:true
            }
            var params=Object.assign(row,this.rwszbForm)
           //console.log("chakan"+params);
            this.$nextTick(() => {
              this.$refs.rwszbFormRef.init(params)
            })
        },

        //子集信息
        zhibiaoChild(zhibiaoChild){
            if(zhibiaoChild){
                this.zhiShow=1
            }
            this.getDataList();

        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
        // 获取数据列表
        getDataList() {
          this.dataListLoading = true
          getPage(Object.assign({
            workAssignAuditStatus:5,
            fayueName:this.form.fayueName,
            fayueZhiwu:this.form.fayueZhiwu,
            shouyueZhiwu:this.form.shouyueZhiwu,
            shouyueName:this.form.shouyueName,
            current: this.pageIndex,
            size: this.pageSize
          })).then(response => {
            this.tableData = response.data.data.records
            this.totalPage = response.data.data.total
          })
          this.dataListLoading = false
        },
         cutout2(cellValue) {
          if(cellValue==0){
            return '创建中';
          }
          if(cellValue==1){
            return '已拟定推送';
          }
          if(cellValue==2){
            return '审核中';
          }
          if(cellValue==3){
            return '审核退回';
          }
          if(cellValue==4){
            return '审核完成';
          }
          if(cellValue==5){
            return '签订中';
          }
          if(cellValue==6){
            return '已退回';
          }
          if(cellValue==7){
            return '审核通过';
          }
        },

            //批量审核
        wbshOkAll(){
            const rows = this.$refs.tableRef.selection
            if(rows.length > 0){
                this.$confirm('是否要通过' + rows.length + '条签订审核?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    wbshOkAll(
                      rows,
                      'qdsh'
                      ).then(res => {
                        this.$message.closeAll();
                        this.$message({
                            type: 'info',
                            message: res.data.data + '条签订审核已通过'
                        });
                        this.getDataList()
                    }).catch(() => {
                        this.$message({
                            type: 'error',
                            message: '提交失败!'
                        });
                        this.getDataList()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
            }else{
                this.$message({
                    type: 'info',
                    message: '请选择一条记录审核!'
                });
            }
        },

    }
}
</script>

<style>

</style>
